<template>
  <div v-if="visible" class="set-box">
    <h3 class="set-title">视屏组件</h3>
    <el-form :model="videoForm" class="label-black" ref="videoForm" label-width="76px">
      <div class="set-part mt20">
        <div class="class_box">
          <el-form-item label="选择模版" prop="listStyle">
            <div class="val-show">{{videoForm.listStyle | filterRadio(listStyleOption)}}</div>
          </el-form-item>
          <div class="brother_row" style="margin-top: -10px;margin-bottom: 20px;">
            <en-radio-tab
              :optionsData="listStyleOption"
              :defaultData="videoForm.listStyle"
              v-model="videoForm.listStyle">
            </en-radio-tab>
          </div>
        </div>
      </div>
      <div class="set-part video-part mb20">
        <h4 class="form-title">添加视屏</h4>
        <div class="title-tip">单个组件最多添加10个视频，多余视频请另拖组件</div>
        <ul v-if="videoForm.videoList.length"  class="video-warp">
          <draggable v-model="videoForm.videoList" class="video-list">
            <li class="video-item"
              v-for="(item, index) in videoForm.videoList"
              :key="index">
              <div class="item-box">
                <div class="img-box">
                  <img :src="item.imgUrl" />
                  <div class="modify-img" @click="imageUpload(index, item)">{{item.imgUrl&&item.imgUrl!==noImgUrl?'更换':'添加'}}封面</div>
                </div>
                <div class="img-item-content">
                  <el-form-item label-width="35px" label="标题" :prop="`videoList.${index}.title`">
                    <el-input
                      maxlength="10"
                      placeholder="建议10个字以内，必填"
                      v-model="item.title">
                    </el-input>
                  </el-form-item>
                  <el-form-item label-width="35px" label="描述" :prop="`videoList.${index}.desc`">
                    <el-input
                      maxlength="15"
                      placeholder="建议15个字以内，必填"
                      v-model="item.desc">
                    </el-input>
                  </el-form-item>
                  <el-form-item label-width="35px" label="视屏">
                    <el-upload
                      ref="video_url"
                      class="img-upload upload-video"
                      :action="MixinUploadApi"
                      :on-success="(res) => { uploadVideo(res, index)}"
                      :before-upload="beforeUploadVideo"
                      :show-file-list="false">
                      <div class="upload-show-box">
                        <span :class="`upload-show ${item.videoUrl?'show-val':''}`">{{item.videoUrl?item.videoName:'请上传视屏，建议尺寸16:9'}}</span><span v-if="item.videoUrl">修改</span>
                      </div>
                    </el-upload>
                  </el-form-item>
                </div>
              </div>
              <div class="item-delete">
                <i class="el-icon-close" @click="videoForm.videoList.splice(index, 1)"></i>
              </div>
            </li>
          </draggable>
        </ul>
        <div v-if="videoForm.videoList.length < 11" class="add-button">
          <el-button plain @click="addVideo()"><i class="el-icon-plus"></i>添加视屏</el-button>
        </div>
      </div>
      <div class="set-part mt20">
        <!-- 视屏样式开始 -->
        <el-form-item label="视屏倒角" prop="proRadius">
          <div class="flex">
            <div class="val-show flex-1">{{videoForm.radius | filterRadio(radiusOption)}}</div>
            <en-radio-tab
              :optionsData="radiusOption"
              :defaultData="videoForm.radius"
              v-model="videoForm.radius">
            </en-radio-tab>
          </div>
        </el-form-item>
        <el-form-item label="页面边距" prop="pagePadding">
          <div class="flex">
            <el-slider class="row-slider" :min="0" :max="30" v-model.number="videoForm.pagePadding"></el-slider>
            <el-input class="row-input" v-model.number="videoForm.pagePadding"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="视屏间距" prop="videoPadding">
          <div class="flex">
            <el-slider class="row-slider" :min="0" :max="30" v-model.number="videoForm.videoPadding"></el-slider>
            <el-input class="row-input" v-model.number="videoForm.videoPadding"></el-input>
          </div>
        </el-form-item>
        <!-- 视屏样式结束 -->

        <!-- 视屏展示配置开始 -->
        <el-form-item label="视频名称" prop="showTitle">
          <div class="flex">
            <div class="val-show flex-1">{{videoForm.showTitle?'显示':'不显示'}}</div>
            <el-checkbox v-model="videoForm.showTitle"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="视频描述" prop="showDes">
          <div class="flex">
            <div class="val-show flex-1">{{videoForm.showDes?'显示':'不显示'}}</div>
            <el-checkbox v-model="videoForm.showDes"></el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="发布时间" prop="showTime">
          <div class="flex">
            <div class="val-show flex-1">{{videoForm.showTime?'显示':'不显示'}}</div>
            <el-checkbox v-model="videoForm.showTime"></el-checkbox>
          </div>
        </el-form-item>
        <!-- 视屏展示配置结束 -->
      </div>
    </el-form>
    <el-button type="primary" @click="handleConfirm">数据提交</el-button>

    <!-- 图片上传 -->
    <en-image-picker
      :show="dialogImageShow"
      :default-data="defaultImageUrl"
      @close="dialogImageShow = false"
      @confirm="handleImagePickerConfirm"
      :limit="1"
    />
  </div>
</template>

<script>
  import { Foundation } from '~/ui-utils'
  import mixin from '../../mixin';
  import draggable from 'vuedraggable'
  const noImg = '';
  let defaultForm = {
    listStyle: 'row_one', // 列表样式
    videoList: [], // 视屏列表
    radius: 4, // 视屏角度
    pagePadding: 15, // 页面边距
    videoPadding: 10, // 视屏间距
    showTitle: true, // 是否显示标题
    showDes: true, // 是否显示描述
    showTime: true // 是否显示发布时间
  };
  export default {
    name: 'EnVideoPicker',
    mixins: [mixin],
    components: { draggable },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      // 默认数据
      defaultData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        noImgUrl: noImg,
        dialogImageShow: false,
        defaultImageUrl: undefined,
        currentIndex: undefined,
        visible: this.show,
        videoForm: JSON.parse(JSON.stringify(defaultForm)),
        /** 视屏配置 */
        radiusOption: [{
          value: 0,
          label: '直角',
          icon: 'fonticon-radius-no'
        },{
          value: 4,
          label: '圆角',
          icon: 'fonticon-radius-yes'
        }],
        listStyleOption: [{
          value: 'row_one',
          label: '一行一个',
          icon: 'fonticon-good-style1'
        },{
          value: 'row_two',
          label: '一行两个',
          icon: 'fonticon-good-style2'
        }]
      }
    },
    watch: {
      show(newVal) {
        this.visible = newVal
      },
      defaultData(newVal) {
        console.log(12);
        console.log(newVal);
        this.videoForm = newVal || JSON.parse(JSON.stringify(defaultForm));
        console.log(this.videoForm);
      }
    },
    methods: {
      /**
        * @date 2020/12/08
        * @author wolfMan
        * @description {视屏校验}
      */
      beforeUploadVideo(file) {
        let fileSize = file.size / 1024 / 1024 < 50
        if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) === -1) {
          this.$message.error('请上传正确的视频格式')
          return false
        }
        if (!fileSize) {
          this.$message.error('视频大小不能超过50MB')
          return false
        }
      },
      /**
       * 选择图片
       */
      imageUpload(_index, _item) {
        this.currentIndex = _index;
        this.currentItem = _item;
        if (_item && _item.imgUrl !== noImg) {
          console.log(_item);
          console.log(_item !== noImg);
          this.defaultImageUrl = [{url:_item.imgUrl}];
        };
        this.dialogImageShow = true;
      },
      /*
        * @date 2020-01-18
        * @author wolfMan
        * @description {图片上传}
      */
      handleImagePickerConfirm(fileList) {
        const file = fileList[0];
        const _currentIndex = this.currentIndex;
        let _listItem = {
          imgUrl: file.response.url,
          title: undefined,
          opt: {}
        };
        if (_currentIndex || _currentIndex === 0) {
          const _currentItem = this.currentItem;
          _listItem.title = _currentItem.title;
          _listItem.opt = _currentItem.opt;
          this.$set(this.videoForm.videoList, _currentIndex, _listItem);
        } else {
          this.videoForm.imgList.push(_listItem);
        }
      },
      /*
        * @date 2020-01-14
        * @author wolfMan
        * @description {移除已选中的视屏}
      */
      deleteVideo (_index) {
        this.videoForm.videoList.splice(_index, 1);
      },
      /**
        * @date 2020/12/09
        * @author wolfMan
        * @description {添加视屏项}
      */
      addVideo () {
        this.videoForm.videoList.push({
          imgUrl: noImg,
          title: undefined,
          desc: undefined,
          videoUrl: undefined,
          videoName: undefined,
          time: undefined
        });
      },
      /**
        * @date 2020/12/09
        * @author wolfMan
        * @description {}
      */
      uploadVideo (res, _index) {
        if (res) {
          let _videoItem = this.MixinClone(this.videoForm.videoList[_index]);
          const { url, name } = res;
          _videoItem.videoUrl = url;
          _videoItem.videoName = name;
          let _timeString = Number(new Date())/1000;
          _videoItem.time = _timeString;
          _videoItem.timeShow = Foundation.unixToDate(_timeString);
          this.$set(this.videoForm.videoList, _index, _videoItem);
        };
      },
      /*
        * @date 2020-01-14
        * @author wolfMan
        * @description {数据提交}
      */
      handleConfirm() {
        this.$refs['videoForm'].validate((valid) => {
          if (valid) {
            this.$emit('confirm', this.MixinClone(this.videoForm));
          } else {
            this.$message.error('表单填写有误，请核对！')
            return false
          }
        })
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .video-part {
    padding-bottom: 20px;
    .video-warp {
      list-style: none;
      padding: 12px 20px 0 20px;
      margin: 0 -20px;
      background: #f2f2f2;
      .video-item {
        position: relative;
        border-radius: 2px;
        background-color: #fff;
        box-shadow: 0 0 4px 0 rgba(10,42,97,.2);
        cursor: move;
        & + .video-item {
          margin-top: 12px;
        }
        /deep/ .el-form-item {
          margin-bottom: 4px;
          .el-form-item__label {
            padding-right: 5px;
            line-height: 30px;
            color: #333;
            font-size: 13px;
          }
          .el-form-item__content {
            line-height: 0;
            .el-input__inner {
              padding: 0 10px;
              height: 30px;
              line-height: 30px;
              font-size: 12px;
            }
          }
          .val-show {
            margin: 4px 0;
            line-height: 24px;
          }
          .upload-show-box {
            display: flex;
            justify-content: center;
            margin-top: 3px;
            line-height: 24px;
            color: #3870EA;
            font-size: 12px;
            .upload-show {
              margin: 0;
              max-width: 150px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              &.show-val {
                padding: 5px;
                margin-right: 5px;
                line-height: 12px;
                border: solid 1px #3870EA;
                border-radius: 4px;
                box-sizing: border-box;
                background: rgba(56, 112, 234, 0.2);
                color: #2F68F1;
              }
            }
          }
        }
        .item-box {
          display: flex;
          padding: 12px;
        }
        .img-box {
          flex-grow: 0;
          position: relative;
          width: 80px;
          height: 80px;
          border: 1px solid #e5e5e5;
          text-align: center;
          overflow: hidden;
          background: #f2f4f6;
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
          .modify-img {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            line-height: 18px;
            text-align: center;
            cursor: pointer;
            background: rgba(0, 0, 0, .5);
            color: #fff;
            font-size: 12px;
          }
        }
        .img-item-content {
          flex: 1;
        }
        .item-delete {
          position: absolute;
          top: -10px;
          right: -10px;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 20px;
          height: 20px;
          border-radius: 10px;
          cursor: pointer;
          background: #CACACA;
          color: #fff;
          font-size: 14px;
        }
      }
    }
    /deep/ .add-button {
      padding: 10px 20px;
      margin: 0 -20px;
      background: #f2f2f2;
      .el-upload {
        width: 100%;
      }
      .el-button {
        position: relative;
        padding: 0 20px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        border: solid 1px #3870EA;
        box-sizing: border-box;
        border-radius: 4px;
        color: #3870EA;
        &:hover,
        &:focus {
          background: rgba(56, 112, 234, .1);
        }
        i {
          position: absolute;
          top: 1px;
          left: 18px;
          line-height: 38px;
          font-size: 16px;
          font-weight: 700;
        }
      }
    }
  }
.class_box {
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: solid 1px #e6e6e6;
}
</style>
